<template>
  <div>
    <br />
    <br />

<form action="/">
  <van-search
    v-model="value"
    show-action
    placeholder="请输入搜索关键词"
    @search="onSearch"
    @cancel="onCancel"
  />
</form>

    <van-tabs v-model="active" class="nav" @click="onClick()">
    
      <van-tab :title="v.navigationName" v-for="v in navList" :key="v.id"></van-tab>
    </van-tabs>
    <div class="content">
      <div @click="play(v)" v-for="v in recommend" :key="v.id" class="item" >
        <div class="img_div">
          <img :src="v.albumPicUrl" alt="" />
        </div>

        <div class="dtl">
          <p>歌名：{{ v.musicName }}</p>
          <p>歌手：{{ v.artistName }}</p>
          <p>专辑：{{ v.musicName }}</p>
          <p>类别：{{ v.navigationName }}</p>
          
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import url from "../tools/url.js";
import { Toast } from 'vant';
export default {
  name: "FenLei",
  data() {
    return {
      active: 0,
      navList: [],
      recommend: [],
      value:""
    };
  },
  methods: {
    onSearch(val){
       console.log(this.value)
      var token=sessionStorage.getItem("token");
      var value=this.value
      var str=`token=${token}&keyword=${value}`
      this.axios.post(url.GETMUSIC,str).then(res=>{
        console.log(res);
          if (res.data.code == 200) {
            if(res.data.data.length==0){
              Toast("抱歉，当前没有您搜索的歌曲");
            }else{
              this.recommend = res.data.data;                 
            }
          } else {
            this.$router.push("/Login").catch((e) => {});
          }
      })
    },
    onCancel(){
      Toast('取消');
    },

    //播放音乐
    play(v){
      this.$store.commit("savemusic",v);
    },
    onClick() {
      var token = sessionStorage.getItem("token");
      var id = this.active + 1;
      if (id == 1) {
        this.axios.post(url.RECOMMEND, `token=${token}`).then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            this.recommend = res.data.data;
          } else {
            this.$router.push("/Login").catch((e) => {});
          }
        });
      } else {
        var str = `token=${token}&id=${id}`;
        this.axios.post(url.NAVFINDMUSIC, str).then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            this.recommend = res.data.data;
          } else {
            this.$router.push("/Login").catch((e) => {});
          }
        });
      }
    },
  },
  mounted() {
    //请求导航栏标题
    var token = sessionStorage.getItem("token");
    this.axios.post(url.NAV, `token=${token}`).then((res) => {
      console.log(res);
      if (res.data.code == 200) {
        this.navList = res.data.data;
      } else {
        this.$router.push("/Login").catch((e) => {});
      }
    });
    //获取推荐歌曲
    this.axios.post(url.RECOMMEND, `token=${token}`).then((res) => {
      console.log(res);
      if (res.data.code == 200) {
        this.recommend = res.data.data;
      } else {
        this.$router.push("/Login").catch((e) => {});
      }
    });
  },
};
</script>
<style scoped>
.item {
  display: flex;
  background-color: white;
  margin-top: 3%;
}
.item .img_div {
    width: 30%;
}
.item img {
  width: 100%;
}
.nav {
  position: fixed;
  top: 0px;
  z-index: 99;
}
.dtl p {
  margin-top: 8%;
  margin-left: 20px;
  font-size:15px
}

</style>
